<template>
  <div>
    <van-dropdown-menu>
      <van-dropdown-item
        v-model="value1"
        disabled
        :options="option1"
        title="全部"
      />
      <van-dropdown-item
        v-model="value2"
        title="价格"
        :options="option2"
        @change="priceChange"
      />
      <van-dropdown-item
        v-model="value3"
        title="分类"
        :options="filterCategory"
        @change="cateChange"
      />
    </van-dropdown-menu>
    
    <van-empty
      v-if="goodsList.length==0"
      class="custom-image"
      image="https://img01.yzcdn.cn/vant/empty-image-search.png"
      description="未找到相关内容"
    />
    <Products :goodsList="goodsList" />
  </div>
</template>

<script>
import Products from "../Products.vue";
export default {
  name: "SearchProducts",
  props: ["goodsList"],
  data() {
    return {
      value1: "",
      value2: "",
      option1: [],
      option2: [
        { text: "价格由高到低", value: "desc" },
        { text: "价格由低到高", value: "asc" },
      ],
    };
  },
  props: ["filterCategory", "goodsList"],
  components: {
    Products,
  },
  computed: {
    value3: {
      get() {
        let val = "";
        this.filterCategory.map((item) => {
          if (item.checked) {
            val = item.value;
          }
        });
        return val;
      },
      set(val) {
        // console.log(val);
      },
    },
  },
  methods: {
    priceChange(val) {
      // 根据价格高/低 排序
      // console.log( this.value2);
      this.$emit("priceChange", val);
    },
    cateChange(val) {
      // 根据类别筛选
      // console.log(val);
      this.$emit("cateChange", val);
    },
  },
  mounted(){
    console.log(123123,this.filterCategory);
  }
};
</script>

<style>
</style>